//**********************1.查询数据 */
function renderStudent() {
    axios.get("./student/list").then(result => {
        // console.log(result);
        let { code, data } = result.data
        // console.log(code);
        // console.log(data);
        if (code === 0) {
            let trs = ``
            data.forEach(item => {
                trs += `
                <tr>
                <th scope="row">${item.id}</th>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.sex}</td>
                <td>${item.group}</td>
                <td>${item.phone}</td>
                <td>${item.salary}</td>
                <td>${item.truesalary}</td>
                <td>${item.province} ${item.city} ${item.county}</td>
                <td>
                  <button data-id= "${item.id}"type="button" class="btn btn-primary btn-sm edit" >修改</button>
                  <button data-id= "${item.id}"type="button" class="btn btn-danger btn-sm del">删除</button>
                </td>
              </tr>
                `
            });
            $('tbody').html(trs)
        }
    })

}
renderStudent()
// *********************2.添加*/
// 获取省
axios.get('/geo/province').then(result => {
    console.log(result);
    let option = `<option value="" selected>--省--</option>`
    result.data.forEach(item => {
        option += `<option value="${item}" >${item}</option>`
    })
    $('select[name=province]').html(option)
})

// 获取市 change(发生改变)
$('select[name=province]').on('change', function () {
    let pname = $(this).val()
    $('select[name=county]').html(`<option value="" selected>--省--</option>`);
    if (pname == '') {
        $('select[name=city]').html(`<option value="" selected>--市--</option>`);
        return
    }
    axios.get('/geo/city', { params: { pname } }).then(result => {
        let option = `<option value="" selected>--市--</option>`
        result.data.forEach(item => {
            option += `<option value="${item}" >${item}</option>`
        })
        $('select[name=city]').html(option)
    })

})

// 获取区
$('select[name=city]').on('change', function () {
    let pname = $(this).parents('.row').find('select').eq(0).val()
    let cname = $(this).val()
    if (pname == '') {
        $('select[name=county]').html(`<option value="" selected>--县--</option>`);
        return
    }
    axios.get('/geo/county', { params: { pname, cname } }).then(result => {
        let option = `<option value="" selected>--县--</option>`
        result.data.forEach(item => {
            option += `<option value="${item}" >${item}</option>`
        })
        $('select[name=county]').html(option)
    })

})

// 表单验证
function test() {
    return {
        fields: {
            name: { // 这里 name 是 input 的name属性值，表示对这个输入框进行验证
                validators: {
                    notEmpty: {   //不能为空
                        message: '姓名不能为空.'
                    },
                    stringLength: {   //检测长度
                        min: 2,
                        max: 10,
                        message: '姓名需要2~10个字符'
                    }
                }
            },
            age: {
                validators: {
                    notEmpty: {
                        message: '年龄不能为空'
                    },
                    greaterThan: {
                        value: 18,
                        message: '年龄必须大于18岁'
                    },
                    lessThan: {
                        value: 50,
                        message: '年龄必须小于50岁'
                    }
                }
            },
            group: {
                validators: {
                    notEmpty: {
                        message: '组号不能为空'
                    }
                }
            },
            sex: {
                validators: {
                    notEmpty: {
                        message: '性别不能为空'
                    },
                    regexp: {
                        regexp: /^男|女$/i,
                        message: '性别只能是男或者女'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {
                        message: '手机号不能为空'
                    },
                    regexp: {
                        regexp: /^1\d{10}$/i,  // 1 开头。\d 表示一个数字 {10} 表示有10个
                        message: '手机号格式不正确'
                    }
                }
            },
            salary: {
                validators: {
                    notEmpty: {
                        message: '期望薪资不能为空'
                    },
                    greaterThan: {
                        value: 100,
                        message: '期望薪资必须大于100'
                    },
                    lessThan: {
                        value: 99999,
                        message: '期望薪资必须小于99999'
                    }
                }
            },
            truesalary: {
                validators: {
                    notEmpty: {
                        message: '实际薪资不能为空'
                    },
                    greaterThan: {
                        value: 100,
                        message: '实际薪资必须大于100'
                    },
                    lessThan: {
                        value: 99999,
                        message: '实际薪资必须小于99999'
                    }
                }
            },
            province: {
                validators: {
                    notEmpty: {
                        message: '省不能为空'
                    },
                    stringLength: {   //检测长度
                        min: 1,
                        max: 20,
                        message: '省不能为空'
                    }
                }
            },
            city: {
                validators: {
                    notEmpty: {
                        message: '市不能为空'
                    },
                    stringLength: {   //检测长度
                        min: 1,
                        max: 20,
                        message: '市不能为空'
                    }
                }
            },
            county: {
                validators: {
                    notEmpty: {
                        message: '县不能为空'
                    },
                    stringLength: {   //检测长度
                        min: 1,
                        max: 20,
                        message: '县不能为空'
                    }
                }
            }
        }
    }
}

$('#addModal form').bootstrapValidator(test()).on('success.form.bv', function (e) {
    e.preventDefault();
    // 收取表单数据
    let data = $(this).serialize()
    // Ajax提交
    axios.post('/student/add', data).then(result => {
        let { code, message } = result.data
        if (code === 0) {
            toastr.success(message); // 提示
            renderStudent(); // 更新页面数据
            $('#addModal').modal('hide') // 关闭弹出层
        }
    })
})

// *********************2.修改*/
$('tbody').on('click', '.edit', function () {
    let id = $(this).data('id'); // 得到学生的id
    // 先获取当前这个学生的信息（数据）
    axios.get('/student/one', { params: { id } }).then(result => {
        // console.log(result.data);
        let { code, data } = result.data;
        if (code === 0) {
            // 目前，已经得到了该学生的信息，下面做数据回填（设置 input 的默认值）
            // console.log(data);
            $('#updateModal input[name=id]').val(data.id);
            $('#updateModal input[name=name]').val(data.name);
            $('#updateModal input[name=age]').val(data.age);
            $('#updateModal input[name=salary]').val(data.salary);
            $('#updateModal input[name=truesalary]').val(data.truesalary);
            $('#updateModal input[name=phone]').val(data.phone);
            // input[name=sex][value=女] 表示查找name=sex并且value=女 这样的input
            $(`#updateModal input[value=${data.sex}]`).prop('checked', true); // prop是jQuery方法，用于设置checked属性
            // 设置组号选中
            $(`#updateModal select[name=group]`).children(`option[value=${data.group}]`).prop('selected', true);
            // 设置省选中
            $(`#updateModal select[name=province]`).children(`option[value=${data.province}]`).prop('selected', true);
            // 市和县，简单的做法，直接设置当前的市和县
            $(`#updateModal select[name=city]`).html(`<option value="${data.city}">${data.city}</option>`);
            $(`#updateModal select[name=county]`).html(`<option value="${data.county}">${data.county}</option>`);
        }
    })

    $('#updateModal').modal('show');

})

$('#updateModal form').bootstrapValidator(test()).on('success.form.bv', function (e) {
    e.preventDefault();

    let data = $(this).serialize()
    axios.put('/student/update', data).then(result => {
        let { code, message } = result.data;
        if (code === 0) {
            toastr.success(message); // 提示
            renderStudent(); // 更新页面数据
            $('#updateModal').modal('hide') // 关闭弹出层
        }
    })
})

// *********************2.删除*/
$('tbody').on('click', '.del', function () {
    if (!confirm('确定要删除吗')) return
    let id = $(this).data('id')
    axios.delete('/student/delete', { params: { id } }).then(result => {
        let { code, message } = result.data
        if (code === 0) {
            // 提示
            toastr.success(message)
            // 从新调用函数更新页面
            renderStudent()
        }
    })
})
